import styles from './trash.module.scss'
import { SearchOutlined } from '@ant-design/icons'

import { Input, Button,Table, Tag, Empty } from 'antd'

import useLoadQuestionList from '@/hooks/useLoadQuestionList';
import useSearchQuestion from '@/hooks/useSearchQuestion';


const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '是否发布',
    dataIndex: 'isPublished',
    key: 'isPublished',
    render: (text: boolean) => {
      return text? <Tag color='blue'>已发布</Tag> : <Tag>未发布</Tag>
    }
  },
  {
    title: '答卷',
    dataIndex: 'answerCount',
    key: 'answerCount',
  },
  {
    title:"创建时间",
    dataIndex:"createdAt",
    key:"createdAt"
  }
];


const Trash = ()=>{

  const {data=[]} = useLoadQuestionList({})
  const {inputRef,handleSearch} =useSearchQuestion()
  const handleSelectChange=(e:any)=>{
    console.log(e)
  }
  //处理删除逻辑
  const handleDelete =()=>{

  }

  //恢复逻辑
  const handleRecover =()=>{

  }

  return (
     <div className={styles.container}>
      {/* 头部 */}
       <div className={styles.header}>
        {/* 左部 */}
         <div className={styles.left}>回收站</div>
          {/* 右部 */}
          <div className={styles.right}>
            <Input ref={inputRef} placeholder='请输入标题'></Input>
            <Button icon={<SearchOutlined />}   onClick={handleSearch} />
          </div>
        </div>

        {/* 表格 */}
        <div className={styles.table}>
          <div className={styles.opt}>
            <Button onClick={handleRecover}  type="primary">恢复</Button>
            <Button onClick={handleDelete} danger>批量删除</Button>
          </div>
          {Array.isArray(data)&&data.length ===0  && <Empty description="暂无数据"></Empty>}
          {Array.isArray(data)&&data.length >0&& <Table
           rowSelection={{ type: 'checkbox',onChange:handleSelectChange}}
           dataSource={Array.isArray(data) ? data :[]} columns={columns} />}
        </div>


        {/* 底部 */}
        <div className={styles.footer}>分页</div>
      </div>
  )
}


export default Trash
